/*原油合约css*/

/*头部*/
.oil_header{
  background: url("../images/bg/bg_gold_2.png") no-repeat;
  /*导航条*/
  .nav_bar {
    width: 100%;
    height: 60px;
    //background-color: #003366;
    background: rgba(15, 103, 220, 0.8);
    //opacity: 0.8;
    position: fixed;
    top: 0;
    //left: 0;
    z-index: 200;
    //box-shadow: 0 2px 2px rgba(0,0,0,.2);
    //border: 1px solid #000;
    .container {
      display: flex;
      justify-content: space-between;
      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        > a {
          width: 114px;
          height: 33px;
          //border: 1px solid red;
          background: url("../images/logo/logo.png") no-repeat;
          text-indent: -9999px;
        }
      }
      .nav {
        //border: 1px solid red;
        display: flex;
        > a {
          //display: block;
          height: 60px;
          padding: 0 35px;
          //border: 1px solid blue;
          display: flex;
          justify-content: center;
          align-items: center;
          > li {
            //border: 1px solid blue;
            //height: 60px;
            > span {
              color: white;
              display: block;
              //padding: 0 35px;
              //line-height: 60px;
              //border: 1px solid red;
            }
            > em {
              display: none;
              //width: 30px;
              //width: 100%;
              height: 1px;
              //border-radius: 50%;
              background-color: white;
              position: relative;
              top: 6px;
              left: 0;
              right: 0;
              margin: auto;
            }
          }
          &:hover {
            li {
              > em {
                display: block;
              }
            }
            background-color: #0E254B;
          }
          &.active {
            li {
              > em {
                display: block;
              }
            }
            background-color: #0E254B;
          }
        }
        > .nav_login_register {
          width: 100px;
          //border: 1px solid green;
          //display: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-left: 50px;
          > a {
            //width: 50px;
            //border: 1px solid blue;
            display: block;
            font-size: 16px;
            color: white;
            text-align: center;
            //margin-top: 21px;
            &:hover {
              color: #0E254B;
            }
            padding-left: 5px;
            padding-right: 5px;
          }
          .login {
            float: left;
          }
          .login_right_line {
            width: 1px;
            height: 15px;
            margin-top: 1px;
            background-color: white;
          }
          .register {
            float: right;
          }
        }
      }
    }
  }
  /*banner*/
  .oil_banner{
    width: 100%;
    margin-top: 60px;
    .container{
      height: 418px;
    }
  }
}
/*主体*/
.oil_main{
  .container{
    //border: 1px solid #000;
    margin-bottom: 80px;
    .main_card{
      margin-top: 80px;
      background-color: white;
      box-shadow:0px 3px 26px 2px rgba(14,72,180,0.08);
      border-radius:8px;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      text-align: center;
      .main_card_title{
        margin-top: 80px;
        > h2{
          font-size: 30px;
          color: #1b1b1b;
          font-weight: bold;
        }
        > span{
          font-size: 14px;
          color: #585858;
          display: block;
          margin-top: 12px;
        }
      }
      .main_card_detail{
        width: 1000px;
        font-size: 14px;
        color: #505050;
        line-height: 24px;
        text-align: left;
        margin-bottom: 150px;
        > p{
          margin-top: 35px;
          &:first-child{
            margin-top: 50px;
          }
        }
      }
      .main_product{
        //border: 1px solid #000;
        .product_tab{
          display: flex;
          .product_column{
            text-align: center;
            line-height: 60px;
            color: #585858;
            font-size: 16px;
            .product_name{
              background-color: #0F67DC;
              color: white;
              font-size: 19px;
            }
            &:first-child{
              width: 185px;
              .product_gold{
                border-left: 1px solid #E6E6E6;
              }
              .product_silver{
                border-left: 1px solid #E6E6E6;
              }
            }
            &:nth-child(2){
              width: 124px;
            }
            &:nth-child(3){
              //flex: 1;
              width: 349px;
            }
            &:last-child{
              flex: 1;
              .product_name{
                border-right: 1px solid #0E48B4;
              }
              .product_time{
                height: 121px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #505050;
                .time_container{
                  //border: 1px solid red;
                  display: flex;
                  flex-flow: column nowrap;
                  justify-content: space-between;
                  text-align: left;
                  font-size: 14px;
                  line-height: 24px;
                  padding-left: 30px;
                  padding-right: 30px;
                }
              }
            }
            > div{
              height: 60px;
              //border: 1px solid #000;
              border-right: 1px solid #E6E6E6;
              border-bottom: 1px solid #E6E6E6;
              background-color: white;
            }
            .product_gold{
              color: #505050;
            }
            .product_silver{
              color: #505050;
            }
          }
        }
        .product_explain{
          height: 56px;
          background-color: #F0F2F7;
          text-align: center;
          line-height: 56px;
          font-size: 14px;
          color: #FF1818;
          margin-bottom: 150px;
        }
      }
    }
  }
}